<script setup lang="tsx">
defineOptions({
  name: "paramsInfoSearch"
});

import { ref, onMounted } from "vue";
import { queryClassList } from "@/api/modules/fab";
import { querySystemSelect } from "@/api/equip/archive";

const emits = defineEmits(["change"]);

const formParams = defineModel({
  type: Object as PropType<{ className?: string; systemCode?: string; quotaName?: string }>,
  default: () => ({ className: "", systemCode: "", quotaName: "" })
});

const classNameOptions = ref<Array<any>>([]);
const systemCodeOptions = ref<Array<any>>([]);
const treeSelectProps = { label: "name", children: "children" };

const classNameChangeHandler = async (className: string, flag: boolean = false) => {
  systemCodeOptions.value.splice(0);
  formParams.value.systemCode = "";
  const params = { className, factoryArea: "" };
  const res = await querySystemSelect(params);
  systemCodeOptions.value = res as Array<any>;
  !flag && emits("change", { ...formParams.value });
};

const systemCodeChangeHandler = (val: string) => {
  emits("change", { ...formParams.value });
};

const quotaNameChangeHandler = (val: string) => {
  emits("change", { ...formParams.value });
};

const init = async () => {
  const res = await queryClassList(null);
  if (!res?.length) return;
  classNameOptions.value = res?.map(({ itemName: label, itemValue: value }) => ({ label, value }));
  await classNameChangeHandler("", true);
};

onMounted(async () => {
  await init();
});
</script>

<template>
  <div class="params-info-search">
    <px-select v-model="formParams.className" clearable filterable placeholder="请选择科室" @change="classNameChangeHandler">
      <px-option v-for="item in classNameOptions" :key="item.value" :label="item.label" :value="item.value" />
    </px-select>
    <px-tree-select
      v-model="formParams.systemCode"
      clearable
      filterable
      check-strictly
      highlight-current
      node-key="code"
      :props="treeSelectProps"
      :data="systemCodeOptions"
      :render-after-expand="false"
      placeholder="请选择系统"
      @change="systemCodeChangeHandler"
    />
    <px-input v-model.trim="formParams.quotaName" clearable placeholder="请输入指标名称" @input="quotaNameChangeHandler" />
  </div>
</template>

<style lang="scss" scoped>
.params-info-search {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}
</style>
